<template>
	<div class="login-wrap">
		<div class="logo-wrap">
			<img src="~@/assets/logo.png">
		</div>

		<van-form @submit="submitHandler">
			<van-field
				v-model="formData.username"
				label="用户名"
				placeholder="请输入您的用户名"
				:rules="[{ required: true }]"
			/>
			<van-field
				v-model="formData.password"
				type="password"
				label="密码"
				placeholder="请输入您的密码"
				:rules="[{ required: true }]"
			/>
			<div style="margin: 30px 16px 16px;">
				<van-button round block type="info" native-type="submit">登录系统</van-button>
			</div>
		</van-form>

		<p class="copyright-wrap">
			<span>这是企业文化<em>•</em>这是企业文化</span>
			<span>© {{currentDate.getFullYear()}} {WEB_TITLE_NAME}版权所有</span>
		</p>
	</div>
</template>

<script>
import JBoot, {WebStorage} from 'jboot-env';
import {Form, Field, Button} from 'vant';

export default JBoot.form({
	components: {
		[Form.name]: Form,
		[Field.name]: Field,
		[Button.name]: Button,
	},

	data() {
		return {
			moduleName: 'auth',
			submitMethod: 'login',
			currentDate: new Date()
		}
	},

	methods: {
		submitSuccessHandler(response) {
			WebStorage.localMode().set('{PROJECT_NAME}-token', response.data.key, 1000 * 60 * 60 * 24 * 365).then(() => {
				this.$jump('/', true);
			});
		}
	}
});
</script>

<style lang="scss">
.login-wrap {
	height: 100%;
	padding: 0 15px;
	display: flex;
	flex-direction: column;

	& > .logo-wrap {
		margin-top: 40%;
		margin-bottom: 50px;
		text-align: center;

		& > img {
			width: 50%;
		}
	}

	& > .van-form {
		flex: 1;
	}

	& > .copyright-wrap {
		text-align: center;

		& > span {
			display: block;
			font-size: 12px;
			line-height: 24px;

			&:first-child {
				color: #606266;
			}

			&:last-child {
				color: #b7b7b7;
			}
		}
	}
}
</style>
